<template>
	<view class="app-select">
		<view class="app-select-content" @click="open = !open" role="tablist" :aria-label="'当前性别'+value2text">
			<text class="app-select-content--input text--thirdary-dark">{{value2text}}</text>
		</view>
		<view class="app-select-options flex--col" v-show="open">
			<text class="text--thirdary-dark" v-for="data in localdata" :key="data.value" @click="changeOption(data.value)" > {{ data.text }}</text>
		</view>
	</view>
	
</template>

<script>
	export default {
		props:['localdata','option'],
		emits:['changeOption'],
		computed:{
			value2text(){
				const selected = this.localdata.find(d => d.value === this.option)
				if(!selected){
					return "暂未选择"
				}
				return selected.text
			}
		},
		data(){
			return {
				open:false
			}
		},
		methods:{
			changeOption(value){
				this.$emit('changeOption',value)
				this.open = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.text--thirdary-dark{
		font-size: 16px;
		font-weight: 500;
		color:#383838;
	}
	
	.app-select{
		width:40%;
		height: 35px;
		border: 1px solid #e5e5e5;
		border-radius: 4px;
		background-color: #fff;
		position:relative;
	}
	
	.app-select-content--input{
		line-height: 35px;
		padding:4px;
	}
	
	.app-select-options{
		position:absolute;
		top:120%;
		
		gap:4px;
		
		background:#fff;
		width:100%;
		padding: 4px;
		box-sizing: border-box;
		
		border-radius: 4px;
		border:1px solid #e5e5e5;
		box-shadow: 2px 2px 8px #eee;
		
		text-align: left;
		
	}
</style>